<template>
  <div class="index">
    <div class="index-bg">
      <img src="../../assets/index-bg.jpg" width="100%" alt="">
    </div>
    <div class="index-main">
      <div class="index-tab h5-hairline--bottom">
        <ul class="cur-flex cur-justify-between">
          <li @click="view='LoginAccount'" :class="{'active':view === 'LoginAccount'}">账号登录</li>
          <li @click="view='LoginCode'" :class="{'active':view === 'LoginCode'}">动态登录</li>
        </ul>
      </div>
      <div class="index-content">
        <transition name="slideRightInLeftOut" mode="out-in">
          <component :is="view"></component>
        </transition>
      </div>
      <div class="index-bottom cur-flex cur-justify-center">
        <span></span>
        <span>暂无账号，
          <a href="javascript:void(0)"  style="color:#0d7bcf;" @click="$router.push('/register')">现在注册</a>
        </span>
      </div>
    </div>
  </div>
</template>
<script>
import LoginAccount from './loginAccount'
import LoginCode from './loginCode'
export default {
  components: {
    LoginAccount,
    LoginCode
  },
  data () {
    return {
      loading: false,
      view: 'LoginAccount'
    }
  },
  methods: {}
}
</script>
<style lang="scss">
.index {
  height: 100%;
  background-color: $white;
  &-main {
    padding: 28px;
  }
  &-tab {
    // border-bottom: 1px solid $border-color;
    li {
      width: 50%;
      font-size: 28px;
      padding: 22px;
      color: $gray-dark;
      font-weight: 500px;
      text-align: center;
    }
    li.active {
      color: $red;
      border-bottom: 2px solid $red;
    }
  }
  &-content{
    margin-top: 20px;
  }
  &-bottom{
    margin-top: 30px;
    font-size: 24px;
  }
}
</style>
